<MDXHeader title="SolidStart" description="Adding dark mode to your SolidStart app." />

<Steps>

### Install Kobalte

Start by installing `@kobalte/core`.

```bash
npm install @kobalte/core
```

### Wrap your app

Create a function to fetch the cookie from the server and add the `ColorModeProvider` and `ColorModeScript` to your `app.tsx`.

```tsx {6-10,13,18,19,22}
import { isServer } from "solid-js/web"

import { ColorModeProvider, ColorModeScript, cookieStorageManagerSSR } from "@kobalte/core"
import { getCookie } from "vinxi/http"

function getServerCookies() {
  "use server"
  const colorMode = getCookie("kb-color-mode")
  return colorMode ? `kb-color-mode=${colorMode}` : ""
}

export default function App() {
  const storageManager = cookieStorageManagerSSR(isServer ? getServerCookies() : document.cookie)
  return (
    <Router
      root={(props) => (
        <>
          <ColorModeScript storageType={storageManager.type} />
          <ColorModeProvider storageManager={storageManager}>
            <Nav />
            <Suspense>{props.children}</Suspense>
          </ColorModeProvider>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  )
}
```

### Add needed components

Make sure you have the `button` and `dropdown-menu` components installed.

```bash
npx solidui-cli@latest add button dropdown-menu
```

### Add a mode toggle

Place a mode toggle on your site to toggle between light and dark mode.

<ComponentPreview name="mode-toggle" />

</Steps>
